"use client"
import React, {useEffect, useState} from "react";
import {Button, Card, Form, Input, Select} from "antd";


interface MyComponentProps {
    bpmnInstance: any;
}

import baseInformationClass from "../index.module.css"


// 基础信息组件
const BasicInformationView: React.FC<MyComponentProps> = ({bpmnInstance}: any) => {
    const {modeling, bpmnElement = {}, elementRegistry, bpmnFactory} = bpmnInstance
    const [baseInfo, setBaseInfo] = useState<any>();
    useEffect(() => {
        if (bpmnElement.type?.slice(5) === "Process") {
            if(bpmnElement?.id==="Process"){
                modeling.updateProperties(bpmnElement, {
                    id: "Process_" + new Date().getTime(),
                });
            }
        }
        setBaseInfo(bpmnElement.businessObject)
    }, [bpmnElement.businessObject]);
    // 改变配置信息
    const baseInfoChange = (value: any, key: string) => {
        setBaseInfo({...baseInfo, [key]: value});
        console.log(value, key)
        const attrObj = Object.create(null);
        attrObj[key] = value;

        switch (key) {
            case "id":
                if (value) {

                    modeling.updateProperties(bpmnElement, {
                        id: value,
                    });
                }
                break;
            case "name":
                modeling.updateProperties(bpmnElement, attrObj);
                break;
            case "documentation":
                modeling.updateProperties(bpmnElement, {"flowable:documentation": value || undefined});
                break;
        }
    };
    return (
        <>

       
                <Form>
                    <Form.Item
                        label="ID"
                        labelCol={{span: 6}}
                        wrapperCol={{span: 17}}>
                        <Input
                            value={baseInfo?.id}
                            onChange={(e) => baseInfoChange(e.target.value, "id")}
                        />
                    </Form.Item>
                    <Form.Item
                        label="名称"
                        labelCol={{span: 6}}
                        wrapperCol={{span: 17}}>
                        <Input
                            value={baseInfo?.name}
                            onChange={(e) => baseInfoChange(e.target.value, "name")}
                        />
                    </Form.Item>
                    <Form.Item
                        label="描述信息"
                        labelCol={{span: 6}}
                        wrapperCol={{span: 17}}>
                        <Input.TextArea
                            value={baseInfo?.documentation}
                            onChange={(e) => baseInfoChange(e.target.value, "documentation")}
                        />
                    </Form.Item>
                </Form>
            

        </>

    );
};

export default BasicInformationView;
